<template>
  <div id="shop-theme-3" class="container">
    <en-shop-header :shop="shop"/>
    <en-shop-nav :shop="shop"/>
    <en-shop-sildes :shop-id="shop.shop_id"/>
    <theme3-coupons :shop-id="shop.shop_id"/>
    <div class="goods-anchor">
      <div class="hot-anchor" @click="handleToTag('hot-goods')">
        <p>热卖</p>
        <span>Hot-Goods</span>
      </div>
      <div class="rec-anchor" @click="handleToTag('rec-goods')">
        <p>推荐</p>
        <span>Recommend</span>
      </div>
      <div class="new-anchor" @click="handleToTag('new-goods')">
        <p>新品</p>
        <span>New Arrival</span>
      </div>
    </div>
    <div class="shop-tags">
      <!--热卖商品-->
      <div class="hot-goods">
        <ul class="list-hot-goods">
          <li v-for="(goods, index) in recGoods" :key="index" class="item-hot-goods">
            <div class="img-hot-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <div class="intro-hot-goods">
              <p><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></p>
              <span>RMB：<b>￥{{ goods.price | unitPrice }}</b></span>
              <i>已销售：{{ goods.buy_count }}件</i>
            </div>
          </li>
        </ul>
      </div>
      <!--推荐商品-->
      <div class="rec-goods">
        <ul class="list-rec-goods">
          <li v-for="(goods, index) in newGoods" :key="index" class="item-rec-goods">
            <div class="img-rec-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <div class="intro-rec-goods">
              <i></i>
              <div class="detail-rec-goods">
                <h3><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></h3>
                <p>￥{{ goods.price | unitPrice }}<span> (销量：{{ goods.buy_count }})</span></p>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <!--新品上架-->
      <div class="new-goods">
        <ul class="list-new-goods">
          <li v-for="(goods, index) in hotGoods" :key="index" class="item-new-goods">
            <div class="img-new-goods">
              <nuxt-link :to="'/goods/' + goods.goods_id">
                <img :src="goods.big" :alt="goods.goods_name">
              </nuxt-link>
            </div>
            <div class="intro-new-goods">
              <h3><nuxt-link :to="'/goods/' + goods.goods_id">{{ goods.goods_name }}</nuxt-link></h3>
              <p>RMB：<i>￥{{ goods.price }}</i></p>
            </div>
          </li>
        </ul>
      </div>
      <nuxt-link :to="'/shop/goods-list?shop_id=' + shop_id" class="more-goods">更多本店商品 >></nuxt-link>
    </div>
    <div class="shop-detail">
      <h3>关于店铺</h3>
      <h6 v-html="shop.shop_desc || '暂无简介'"></h6>
    </div>
  </div>
</template>

<script>
  import mixin from './themeMixin'
  import theme3Coupons from './-theme3-coupons'
  export default {
    name: 'shop-theme-3',
    mixins: [mixin],
    components: { theme3Coupons },
    methods: {
      // 滚动到指定标签高度
      handleToTag(tag) {
        this.MixinScrollToTop($('.' + tag).offset().top)
      }
    }
  }
</script>

<style type="text/scss" lang="scss" scoped>
  .goods-anchor {
    display: flex;
    height: 8 * 16px;
    background: #fff;
    padding: 16px;
    overflow: hidden;
    margin: 8px 0 0 0;
    text-align: center;
    div { flex: 1 }
    p {
      color: #fff;
      margin: 2.5 * 16px 0 0 0;
      font-size: 1.2 * 16px;
      font-weight: 400;
    }
    span {
      color: #fff;
      font-family: PingFang SC,Verdana,Helvetica Neue,Microsoft Yahei,Hiragino Sans GB,Microsoft Sans Serif,WenQuanYi Micro Hei,sans-serif;
      font-size: 0.9 * 16px;
      font-weight: 400;
    }
    .hot-anchor { background-color: #3e4b6d }
    .rec-anchor {
      margin: 0 16px;
      background-color: #e3c23f
    }
    .new-anchor { background-color: #2f54b7 }
  }
  .hot-goods {
    width: 100%;
    background: #fff;
    margin: 8px 0 0 0;
    padding: 8px 0;
    ul {
      width: 100%;
      overflow: hidden;
    }
    .item-hot-goods {
      display: flex;
      flex-direction: row-reverse;
      width: 100%;
      overflow: hidden;
      margin: 8px 0 16px 0;
      padding: 8px 0;
      &:nth-child(2n) {
        flex-direction: row;
      }
    }
    .img-hot-goods {
      width: 60%;
      text-align: center;
      img {
        border-radius: 20rem;
        width: 80%;
        box-shadow: 0 1px 16px #dedede;
        padding: 0.3 * 16px;
      }
    }
    .intro-hot-goods {
      width: 33%;
      margin: 4 * 16px 0 0 5%;
      p {
        margin: 0 0 16px;
        font-size: 0.9 * 16px;
        font-weight: 200;
        width: 100%;
        a {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
          color: #53a0be
        }
      }
      span {
        font-size: 0.7 * 16px;
        font-weight: 200;
        display: block;
        width: 100%;
      }
      b {
        display: inline;
        color: #3e4b6d;
        font-size: 1.1 * 16px;
      }
      i {
        font-size: 0.7 * 16px;
        margin: 0.3 * 16px 0 0 0;
        color: #bbb;
        font-weight: 200;
        font-style: normal;
      }
    }
  }
  .rec-goods {
    width: 100%;
    background: #fff;
    border-top: 10px solid #e5e5e5;
    padding: 8px 0;
    ul {
      width: 100%;
      overflow: hidden;
    }
    .item-rec-goods {
      width: 100%;
      overflow: hidden;
      margin: 8px 0 16px 0;
      padding: 8px 0;
      position: relative;
    }
    .img-rec-goods {
      overflow: hidden;
      text-align: center;
      margin: 16px;
      border-bottom: 1px dashed #dedede;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .intro-rec-goods {
      position: absolute;
      width: 80%;
      height: 5 * 16px;
      left: 10%;
      bottom: 2 * 16px;
      z-index: 10;
      background-color: rgba(229, 229, 229, .8);
      i {
        float: left;
        width: 4 * 16px;
        height: 4 * 16px;
        margin: 8px;
        display: block;
        background: url() no-repeat center center #404a6d;
        background-size: 70%;
      }
      .detail-rec-goods {
        float: left;
        width: 70%;
        h3 {
          color: #040404;
          font-size: 16px;
          margin: 16px 0 0.3 * 16px 0;
        }
        a {
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
        }
        p {
          font-size: 16px;
          color: #ff0048;
          font-weight: 200;
        }
        span {
          font-size: 0.7 * 16px;
          color: #979797;
        }
      }
    }
  }
  .new-goods {
    border-top: 10px solid #e5e5e5;
    padding: 8px 2%;
    position: relative;
    overflow: hidden;
    background: #EFEFEF;
    ul {
      width: 106%;
      overflow: hidden;
    }
    .item-new-goods {
      float: left;
      background: #fff;
      width: 46%;
      margin: 0 2% 8px 0;
      overflow: hidden;
      position: relative;
      padding: 0.6 * 16px 0;
      box-shadow: 0 1px 16px #dedede;
    }
    .img-new-goods {
      img {
        display: block;
        margin: 0 auto;
        width: 157px;
        height: 157px;
      }
    }
    .intro-new-goods {
      h3 {
        font-size: 16px;
        font-weight: 200;
        margin: 0 0 0.3 * 16px 0;
        display: block;
        text-align: left;
        width: 90%;
        padding: 0 5%;
        a {
          min-height: 3 * 16px;
          color: #53a0be;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3;
          overflow: hidden;
        }
      }
      p {
        font-size: 0.8 * 16px;
        font-weight: 200;
        color: #3e4b6d;
        width: 90%;
        padding: 0 5%;
      }
    }
  }
  .shop-detail {
    text-align: center;
    font-weight: 200;
    width: 90%;
    overflow: hidden;
    margin: 0 0 3 * 16px 0;
    background: #fff;
    padding: 8px 5%;
    border-top: 10px solid #e5e5e5;
    h3 {
      font-size: 16px;
      line-height: 32px;
      font-weight: 200;
      color: #000;
    }
    h6 {
      font-size: 0.7 * 16px;
      line-height: 32px;
      font-weight: 200;
      color: #ccc;
    }
    img {
      object-fit: cover;
    }
  }
</style>
